<template>
    <el-dialog
        title="排序"
        :visible.sync="dialogVisible"
        size="80%"
        custom-class="search-result-pop title-list"
        :before-close="handleClose">
        <div class="drag-box">
            <div class="items">
                <div class="col img-box">拖动排序</div>
                <div class="col list1">标题</div>
            </div>
            <div v-dragging="{item: item, list:tableList}"
                v-for="item in tableList"
                :key="item.id"
                class="items">
                <div class="img-box">
                    <img src="@/assets/icons/drag.png" class="icon" alt="">
                </div>
                
                <div class="col list1" :title="item.name">{{item.name}}</div>
            </div>
            
        </div>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirm" style="margin-left: 50px">确 定</el-button>
        </div>
        
    </el-dialog>
</template>
<script>
import { sortAPI } from './../api';
export default {
    name: "DragSrot",
    props: ['TYPE'],
    data() {
        return {
            dialogVisible: false,
            tableList: []
        };
    },
    methods: {
        handleClose() {
            this.dialogVisible = false;
            this.tableList = [];
            this.$dragging.$off("dragged");
        },
        open({list}) {
            this.dialogVisible = true;
            this.tableList = list;
        },
        async handleConfirm() {
            const ids = this.tableList.map(v => v.id);
            const { code, msg } = await sortAPI({
                ids
            });
            if (code !== 0) {
                this.$message.error(msg);
                return;
            }
            this.handleClose();
            this.$emit('success');
        }
    },
    mounted() {
        // 拖拽事件
        this.$dragging.$on("dragged", (result) => {
            // 将排序后的结果重新赋值
            this.tableList = result.value.list;
        });
    },
    beforeDestroy() {
        this.$dragging.$off("dragged");
    }
};
</script>
 
<style lang="scss" scoped>
    .title-list {
        background:#fff;
        margin:100px auto 0;
        border: 1px solid red;

        .drag-box {
            max-height: 600px;
            overflow-y: auto;
            border-top: 1px solid #ededed;
            .items {
                width: 100%;
                height: 40px;
                margin: 0 auto;
                position: relative;
                display: flex;
                justify-content: flex-start;
                border: 1px solid #ededed;
                border-top: none;

                .col { 
                    overflow:hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                
                .list1 {
                    width: 20%;
                    flex-shrink: 0;
                }
                .list2 {
                    width: 20%;
                    flex-shrink: 0;
                }
                .list3 {
                    width: 59%;
                    flex-shrink: 0;
                }
            }
            .img-box {
                width: 100px;
                flex-shrink: 0;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                .icon {
                    width: 20px;
                    height: 20px;
                    
                }
            }
            
        }
        .dialog-footer {
            margin-top: 20px;
            text-align: center;
        }
        
    }
</style>